<template>
  <div class="refund-record">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="record-list">
            <div class="record-none" v-if="records.length<1">暂无记录...</div>
            <!-- <van-cell-swipe class="record-item" v-for="(record, index) in records" :key="index" :right-width="65" :left-width="65" :on-close="onClose">
                <span slot="left">选择</span>
                <div class="record-wrap">
                    <img class="record-img" :src="defaultImage">
                    <div class="record-content">
                        <div class="record-title">{{'退订-' + record.course.name}}</div>
                        <div class="record-time">{{record.created_at | date}}</div>
                    </div>
                    <div class="record-amt">{{record.order.amount + '元'}}</div>
                </div>
                <span slot="right">删除</span>
            </van-cell-swipe> -->
            <refund-item v-for="(item, index) in records" :key="index" :desc="item.description" :name="'退订-' + item.course.name"
            :itemId="item.id" :thumb="item.course.preview.image | qnImg(null, 100)" :time="item.created_at|date" :price="item.course.price + '元'" :state="item.status">
            </refund-item>
        </div>
    </van-pull-refresh>
    <back :scroll="false"></back>
  </div>
</template>

<script>
import refundItem from '../../components/base/refund-item.vue'
import back from '../../components/base/back.vue'

export default {
  name: 'refund-record',
  comments: 'refund-record',
  components: {
    'refund-item': refundItem,
    back
  },
  data () {
    return {
      isLoading: false,
      defaultImage: './static/images/退回.png',
      records: [],
      refund_state: {
        0: '待受理',
        1: '已受理',
        2: '已完成'
      }
    }
  },
  created () {
    document.title = '交易记录'
    this.getRefunds()
  },
  methods: {
    onClose (clickPosition, instance) {
      switch (clickPosition) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          this.$dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            instance.close()
          })
          break
      }
    },
    // 下拉刷新
    onRefresh () {
      this.$axios.get('/refounds', {
        params: {
          user_id: JSON.parse(localStorage.getItem('user')).id
        }
      }).then(response => {
        this.records = response.data
        this.$toast('刷新成功')
        this.isLoading = false
      }).catch(error => {
        this.isLoading = false
        console.log(error)
      })
    },
    // 获取用户所有退款记录
    getRefunds: function () {
      this.$axios.get('/refounds', {
        params: {
          user_id: JSON.parse(localStorage.getItem('user')).id
        }
      }).then(response => {
        this.records = response.data
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.refund-record{
    height: auto;
    width: 100%;
    overflow-y: scroll;
}
.record-list{
    margin: 5px;
}
.record-none{
  color: #f8f8f8;
}
.record-item{
    border-bottom: 1px solid #fff;
    // background-color: #504e4a;
}
.record-wrap{
    background-color: #eee;
    position: relative;
    height: 60px;
    width: 100%;
    color: #f8f8f8;
}
.record-detail{
    background-color: transparent;
    color: white;
}
.record-img{
    height: 40px;
    width: 40px;
    position: absolute;
    border-radius: 50%;
    background-repeat: no-repea;
    background-size: 100%;
    left: 5%;
    top: 10px;
}
.record-content{
    position: absolute;
    left: 20%;
    top: 10px;
    width: 58%;
    text-align: left;
}
.record-title{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.record-time{
    font-size: 0.6rem;
}
.record-amt{
    position: absolute;
    right: 5%;
    top: 10px;
}
.record-list div:first-child{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.record-list div:last-child{
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom: none;
}
.refund-search{
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 40px;
    height: 40px;
    z-index: 999;
    border-radius: 50%;
    background-color: #f8f8f8;
    color: white;
    display: flex;
    justify-content: center;
}
.refund-search-icon{
    align-self: center;
}
</style>
